<template>
    <div>
        <div class="container">
            <ul>
                <li v-show="isdelete"  class="list-item " v-for="(item,index) in listArr " data-type="0" :key="index">
                  <div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="skip(item)">
                      <img class="list-img" :src="item.imgUrl" alt="">
                      <div class="list-content">
                      <p class="title">{{item.hiddenDangerType}}</p>
                      <p class="tips">{{item.hiddenDangeDescription}}</p>
                      <p class="time">{{item.createDate.substring(0,10)}}</p>
                      </div>
                      
                  </div>
                  <div  class="delete" @click="deleteItem(item,index)" :data-index="index">删除</div>
                </li>
                <li v-show="!isdelete" class="list-item " v-for="(item,index) in listArr " data-type="0" :key="index">
                  <div class="list-box" @click="skip(item)">
                      <img class="list-img" :src="item.imgUrl" alt="">
                      <div class="list-content">
                      <p class="title">{{item.hiddenDangerType}}</p>
                      <p class="tips">{{item.hiddenDangeDescription}}</p>
                      <p class="time">{{item.createDate.substring(0,10)}}</p>
                      </div>
                      
                  </div>
                  
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default{
 name: 'index',
 data () {
 return {
  startX : 0 ,
  endX : 0 ,
 }
 },
   props: {
    listArr: {
      type: Array,
      default: function () {
        return []
      }
    },
    isdelete:true
  },
 mounted(){
 },
 methods : {
    //跳转
    skip(item){
        this.$emit('hiddenfun',item)
    },
    //滑动开始
    touchStart(e){
    // 记录初始位置
    this.startX = e.touches[0].clientX;
    },
    //滑动结束
    touchEnd(e){
        // 当前滑动的父级元素
        let parentElement = e.currentTarget.parentElement;
        // 记录结束位置
        this.endX = e.changedTouches[0].clientX;
                    // 左滑
        if( parentElement.dataset.type == 0 && this.startX - this.endX > 30 ){
        this.restSlide();
        parentElement.dataset.type = 1;
        }
                    // 右滑
        if( parentElement.dataset.type == 1 && this.startX - this.endX < -30 ){
        this.restSlide();
        parentElement.dataset.type = 0;
        }
        this.startX = 0;
        this.endX = 0;
    },
    //判断当前是否有滑块处于滑动状态
    checkSlide(){
        let listItems = document.querySelectorAll('.list-item');
        for( let i = 0 ; i < listItems.length ; i++){
        if( listItems[i].dataset.type == 1 ) {
        return true;
                }
        }
        return false;
    },
    //复位滑动状态
    restSlide(){
        let listItems = document.querySelectorAll('.list-item');
                    // 复位
        for( let i = 0 ; i < listItems.length ; i++){
            listItems[i].dataset.type = 0;
        }
    },
    //删除
    deleteItem(e,index){
      var Id=[]
      Id.push(e.id)
        this.$axiosAjax.getDelete_H5({Id}).then((res) => {
          if (res.data.success == true) {
            //刷新父组件 问题记录
            this.$parent.getPlanList();
            this.restSlide();
            this.listArr.splice(index,1)
            this.$forceUpdate()
          }
        }).catch((err) => {
          console.log(err)
          }
        )
    },
    // 获取数据

 }
}
</script>
<style>
.page-title{
  text-align: center;
  font-size: 17px;
  padding: 10px 15px;
  position: relative;
}
.page-title:after{
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #ccc;
  color: #ccc;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  z-index: 2;
}
.list-item{
  position: relative;
  height: 60px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.list-item[data-type="0"]{
  transform: translate3d(0,0,0);
}
.list-item[data-type="1"]{
  transform: translate3d(-75px,0,0);
}
.list-item:after{
  content: " ";
  position: absolute;
  left: 7.5px;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #ccc;
  color: #ccc;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  z-index: 2;
}
.list-box{
  padding: 7.5px 7.5px 7.5px 0;
  background: #fff;
  display: flex;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 0;
}
.list-item .list-img{
  display: block;
  width: 37.5px;
  height: 37.5px;
}
.list-item .list-content{
  padding: 3.75px 0 3.75px 3.75px;
  position: relative;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
.list-item .title{
  display: block;
  color: #666;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  font-size: 14px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 1px;
  width: 180px;
}
.list-item .tips{
  display: block;
  overflow: hidden;
  font-size: 12px;
  color: #999;
  height: 20px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-item .time{
  display: block;
  font-size: 12px;
  position: absolute;
  right: 10px;
  top: 12px;
  color: #666;
}
.list-item .delete{
  width: 75px;
  height: 60px;
  background: #ff4949;
  font-size: 17px;
  color: #fff;
  text-align: center;
  line-height: 60px;
  position: absolute;
  top:0;
  right: -75px;
}
</style>


